// -------------进入首页后发送请求，获取用户信息-------------
// 封装成函数，以便后续修改用户信息以后调用
function getUserInfo() {
  /* 
   * axios 里面也可以配置请求
   * axions.get(url,{配置项});   ---- 配置项去 axios 文档中查看
   */
  axios.get('/my/user/userinfo', {
    // headers: {
    //   Authorization: localStorage.getItem('token')
    // }  // headers在common.js 中统一配置请求头了，这里注释掉了 
  }).then(res => {
    // console.log(res);  // 查看结果，套了三层方能得到想要的数据
    // 解构赋值
    let { nickname, user_pic, username } = res.data.data;
    // 1. 设置欢迎你xxx  -- 优先使用 nickname,没有的话使用 username
    // 如果 nickname是真，直接返回它，如果是nickname是假，则返回后面的username
    let name = nickname || username;  // 短路操作 找第一个真值返回
    $('.username').text(name);

    // 2. 显示头像(新注册的账号没有头像，获取name，去的第一个字符，转大写)
    if (user_pic) {
      // 说明用户有头像
      $('.layui-nav-img').attr('src', user_pic).css('display', 'inline-block').prev().hide();
      // 要让它的上一个兄弟元素(文字头像)隐藏，否则第一次上传头像以后因为ajax不刷新页面会导致出现两个头像，刷新以后才会正常
    } else {
      // 说明用户没有头像
      let first = name.substring(0, 1).toUpperCase();  // toUpperCase() 转大写

      // show()  通过display样式，让一个元素显示后:
      // 元素如果是行内元素，show()方法就设置成display:inline; 如果是块级元素，会设置成display:block; 我们直接用css改变即可
      $('.user-avatar').text(first).css('display', 'inline-block');
    }
  })
}

getUserInfo();


// ----------------退出功能------------------------
// 
$('#logout').on('click', function () {
  // 询问是否退出
  layer.confirm('您确定要退出吗?', { icon: 3, title: '提示' }, function (index) {
    // do something
    // 如果点击了确定，会执行这里的函数
    // 1. 删除 token
    localStorage.removeItem('token');
    // 2. 跳转到登录页
    location.href = './login.html'
    // 3. 关闭弹层  -- layui代码里自带的，不用管它，留着就行
    layer.close(index);
  });
})


